<template>
    <div class="Discuss">
        <h1 style="padding-bottom: 10px; padding-top: 10px;">学习交流区</h1>
        <div class="content">
            <div class="communication" :model="tableData">

                <div class="user" v-for="(item, index) in  tableData " :key="index">
                    <h4 style="margin-left: 10px; color: rgba(9, 9, 6, 0.821) ;">{{ item.studentname }}</h4>
                    <p class="neirong"
                        :style="{ backgroundColor: item.studentid === form.studentid ? '#95ec69' : '#f5f5f5' }">
                        {{ item.content }}
                    </p>
                </div>


            </div>

            <div class=" fabu">
                <el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="form.content"
                    style="width: 60%; margin-top: 2px; margin-right: 10px; margin-bottom: 10px;"></el-input>
                <el-button @click="fabu" type="primary" style=" font-size: 20px; height: 38px; margin-bottom: 10px;">发
                    布</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Discuss',
    data() {
        return {
            form: {
                content: "",
                studentid: "",
                studentname: "",
            },
            tableData: [],
            bgcolor: "#95ec69",
        }
    },
    mounted() {
        this.getstudent();
        this.getCommunication();
    },

    methods: {
        fabu() {
            this.axios.post("/communication/save", this.form)
                .then(res => {
                    if (res.data === "success") {
                    }
                })
            this.form.content = "";
            this.getCommunication();
        },
        getstudent() {
            this.axios.get("/student/getstudent")
                .then(res => {
                    this.form.studentid = res.data.id;
                    this.form.studentname = res.data.xueshengxingming;
                })
        },
        getCommunication() {
            this.axios.get("/communication/list")
                .then(res => {
                    this.tableData = res.data;
                    console.log(this.tableData);
                    console.log("zhixing");
                })
        }
    },
}

</script>
<style scoped>
.Discuss {
    width: 100%;
    height: 80.7vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
}

.content {
    width: 60%;
    height: 80%;
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    color: rgba(255, 255, 255, 0.75);
}

.communication {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: start;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.fabu {
    width: 100%;
    height: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user {
    margin-top: 6px;
    margin-left: 10px;
    margin-right: 10px;

}

.neirong {

    font-size: 16px;
    line-height: 32px;


    margin-top: 5px;
    margin-left: 20px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #f5f5f5;
    /* background-color: rgb(43, 227, 30); */
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    color: rgb(15, 13, 13);
}
</style>